import React, { Component } from 'react'
import Visits from './components/Visits'
import VisitsInfo from './components/VisitsInfo'
import Active from './components/Activity'
import QuickAction from './components/QuickAction'
import './index.css'
export default class Home extends Component {
  componentDidMount() {
    window.onresize = () => {
      this.visitsRef && this.visitsRef.chartReseize()
      this.visitsInfoRef && this.visitsInfoRef.chartReseize()
      this.activeRef && this.activeRef.chartReseize()
    }
  }
  componentWillUnmount(){
    window.onresize = null
  }
  render() {
    return (
      <div className='container flex-row flex-wrap'>
        <div className='item'>
          <div className='title'>访问量</div>
          <div className='content'>
            <Visits ref={c => this.visitsRef = c}/>
          </div>
        </div>
        <div className='item'>
          <div className='title'>最近1小时访问情况</div>
          <div className='content'>
            <VisitsInfo ref={c => this.visitsInfoRef = c}/>
          </div>
        </div>
        <div className='item'>
          <div className='title'>当前活跃度</div>
          <div className='content'>
            <Active ref={c => this.activeRef = c}/>
          </div>
        </div>
        <div className='item'>
          <div className='title'>快捷操作</div>
          <div className='content'>
            <QuickAction />
          </div>
        </div>
      </div>
    )
  }
}
